<template>
    <div id="page-dialogs">
        <v-container grid-list-xl fluid>
            <v-layout row wrap>
                <v-flex lg4>
                    <div slot="widget-content">
                        <v-dialog v-model="dialogInvoice" persistent max-width="900px">
                            <v-card>
                                <v-card-title>
                                    <v-flex xs9>
                                        <span class="headline">索要发票</span>
                                    </v-flex>
                                    <v-flex xs1></v-flex>
                                    <v-flex xs1>
                                        <v-btn color="blue darken-1" flat @click="close">关闭</v-btn>
                                    </v-flex>
                                </v-card-title>
                                <v-divider></v-divider>
                                <v-flex xs12 sm6 md12>
                                    <v-card>
                                        <v-list>
                                            <!-- 是否还需要消费时间及索要发票时间，按照时间先后排序 -->
                                            <v-list-tile v-for="item in items" :key="item.addr" @click="">
                                                <v-list-tile-content>
                                                    <v-list-tile-addr v-text="item.addr"></v-list-tile-addr>
                                                </v-list-tile-content>
                                                <v-list-tile-content>
                                                    <v-list-tile-type v-text="item.companyName"></v-list-tile-type>
                                                </v-list-tile-content>
                                                <v-list-tile-content>
                                                    <v-list-tile-type v-text="item.payerIdNumber"></v-list-tile-type>
                                                </v-list-tile-content>
                                                <v-list-tile-content>
                                                    <v-list-tile-type v-text="item.phone"></v-list-tile-type>
                                                </v-list-tile-content>
                                                <v-list-tile-value>
                                                    <v-list-tile-fee class="title-value" v-text="item.fee"></v-list-tile-fee>
                                                </v-list-tile-value>
                                            </v-list-tile>
                                        </v-list>
                                    </v-card>
                                </v-flex>
                            </v-card>
                        </v-dialog>
                    </div>
                </v-flex>
            </v-layout>
        </v-container>
    </div>
</template>

<script>
import Pubsub from "pubsub-js";
export default {
  props: ["dialogInvoice"],
  data() {
    return {
      items: [
        {
          addr: "陕西省西安市雁塔区科技路88号",
          payerIdNumber: "61000000",
          phone: "1590000000",
          companyName: "金凤呈祥",
          fee: "200元"
        },
        {
          addr: "陕西省西安市雁塔区科技路88号",
          payerIdNumber: "61000000",
          phone: "1590000000",
          companyName: "金凤呈祥",
          fee: "200元"
        },
        {
          addr: "陕西省西安市雁塔区科技路88号",
          payerIdNumber: "61000000",
          phone: "1590000000",
          companyName: "金凤呈祥",
          fee: "200元"
        },
        {
          addr: "陕西省西安市雁塔区科技路88号",
          payerIdNumber: "61000000",
          phone: "1590000000",
          companyName: "金凤呈祥",
          fee: "200元"
        }
      ]
    };
  },
  components: {},
  computed: {},
  methods: {
    close() {
      //发布消息
      Pubsub.publish("cancel1");
    }
  }
};
</script>
<style>
.backdrop {
  height: 200px;
  overflow: auto;
}
.divider {
  margin: 16px;
}
.title {
  padding-left: 0px;
}
</style>